<% title t("views.editor.meta.title") %>

<% if @article.video.present? %>
  <div class="article-form-video-preview">
    <% if @article.video_state == "PROGRESSING" %>
      <h1 style="color:#062144;margin-top:1.1em"><%= t("views.editor.video.progress.heading") %></h1>
      <img src="https://media.giphy.com/media/tXL4FHPSnVJ0A/giphy.gif" style="border-radius:12px;height:317px" alt="Bored kid incessantly tapping his fingers">
      <div style="max-width:500px;margin:18px auto 0px;font-size:0.8em;">
        <p>
          <strong><%= t("views.editor.video.progress.notice_1") %></strong>
        </p>
        <p>
          <em><%= t("views.editor.video.progress.notice_2") %></em>
        </p>
      </div>
    <% elsif @article.video_state == "COMPLETED" %>
      <br /><br />
      <%= render "articles/video_player", meta_tags: false, article: @article %>
      <div class="article-form-video-image-url">
        <%= form_for(@article) do |f| %>
          <%= t("views.editor.video.submit_image.text") %><%= f.text_field :video_thumbnail_url, placeholder: t("views.editor.video.submit_image.placeholder") %>
          <%= f.submit t("views.editor.video.submit_image.button"), class: "crayons-btn" %>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>

<%= render "shared/webcomponents_loader_script" %>
<%= render "articles/v2_form", article: @article, organizations: @organizations, version: @version %>

<%= javascript_include_tag "articleForm", defer: true %>
<div id="markdown-lint-js-path" class="hidden" data-markdown-it-js-path="<%= asset_path("markdown-it.min.js") %>" data-markdown-lint-js-path="<%= asset_path("markdownlint-browser.min.js") %>">
